<template>
  <div class="notification-bar">
    <van-notice-bar
      :background="'#1a2c38'"
      :color="'#fff'"
      :text="messageContent"
      :scrollable="true"
      :speed="scrollSpeed"
      @click="handleClick"
    >
      <!-- 自定义内容，如果需要额外的内容，可以添加 -->
      <template #left-icon>
        <svg-icon class="notification-icon" name="通知栏" />
      </template>
    </van-notice-bar>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "ScrollingNotificationBar",
  props: {
    messageContent: {
      type: String,
      required: true,
      default: "This is a scrolling notification message."
    },
    scrollSpeed: {
      type: Number,
      default: 60 // 滚动速度，单位 px/s
    }
  },
  methods: {
    handleClick() {
      console.log("Notice Bar clicked");
      // 执行点击事件
    }
  }
});
</script>

<style scoped>
.notification-bar {
  box-sizing: border-box;
}

.notification-icon {
  font-size: 20px;
  color: #fff;
  margin-right: 8px;
}

.van-notice-bar {
  border: 2px solid #2f4553;
  border-radius: 24px;
}
</style>
